<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>路由管理</el-breadcrumb-item>
      <el-breadcrumb-item>路由列表</el-breadcrumb-item>
    </el-breadcrumb>

<el-card>
<el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入code" clearable v-model="routeCode" @clear="searConfRoute">
            <el-button slot="append" icon="el-icon-search" @click="searConfRoute"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <!-- 点击后去执行 addDialogVisible 弹出添加模态框 -->
          <el-button type="primary" @click="addDialogVisible = true">添加路由</el-button>
        </el-col>
      </el-row>

       <el-table :data="confRouteList" border stripe>
        <el-table-column label="主键ID" width="70" prop="id"></el-table-column>
        <el-table-column label="路由code" width="70" prop="routeCode"></el-table-column>
        <el-table-column label="接口codes" width="120" prop="interfaceCodes"></el-table-column>
        <el-table-column label="返回值路由code" width="370" prop="resKvRouteCode"></el-table-column>
        <el-table-column label="有效时间" width="70" prop="validTime"></el-table-column>
        <el-table-column label="是否激活" width="70" prop="isActivate"></el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>


        <el-table-column label="操作">
          <!-- 拿到整行数据  scope.row可以将整行所有的参数(整个对象的值)来进行传递-->
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="removeActorById(scope.row.actorId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <!--    添加模态框     模态框绑定:visible.sync -->
    <el-dialog title="添加路由" :visible.sync="addDialogVisible" width="50%" @close="addActorFormClose">
      <!-- :label-position 对齐-->
      <!-- ref 指定-->
      <!-- :model 绑定数据-->
      <!-- label-width 标签间距 -->
      <!-- :rules 绑定验证规则   1.设置完成后验证规则会去找命名方法中的所有既定规则-->
      <el-form
        :model="addConfRouteForm"
        :rules="addConfRouteRules"
        ref="addConfRouteFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 验证的数组一定要写在父级标签的一行,否则验证方法无效   (可以通过input标签前方是否有红色*号 来进行判断) -->
        <el-form-item label="路由code" prop="routeCode">
          <el-input v-model="addConfRouteForm.routeCode"></el-input>
        </el-form-item>
        <el-form-item label="接口codes" prop="interfaceCodes">
          <el-input v-model="addConfRouteForm.interfaceCodes"></el-input>
        </el-form-item>
        <el-form-item label="返回路由" prop="resKvRouteCode">
          <el-input v-model="addConfRouteForm.resKvRouteCode"></el-input>
        </el-form-item>
        <el-form-item label="有效时间" prop="validTime">
          <el-input v-model="addConfRouteForm.validTime"></el-input>
        </el-form-item>
        <el-form-item label="是否激活" prop="isActivate">
           <el-select v-model="addConfRouteForm.isActivate" placeholder="请选择是否激活">
                        <el-option label="否" value="0"></el-option>
                        <el-option label="是" value="1"></el-option>
           </el-select>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addConfRoute">确 定</el-button>
        <el-button @click="addDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

        <!-- 修改模态框 -->
    <el-dialog title="修改路由" :visible.sync="editDialogVisible" width="50%" @close="editDepartFormClose">
      <!-- 修改模态框-->
      <el-form
        :model="editConfRouteForm"
        :rules="editConfRouteFormRules"
        ref="editConfRouteFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="路由code" prop="routeCode">
          <el-input v-model="editConfRouteForm.routeCode"></el-input>
        </el-form-item>
        <el-form-item label="接口codes" prop="interfaceCodes">
          <el-input v-model="editConfRouteForm.interfaceCodes"></el-input>
        </el-form-item>
        <el-form-item label="返回值路由code" prop="resKvRouteCode">
          <el-input v-model="editConfRouteForm.resKvRouteCode"></el-input>
        </el-form-item>
        <el-form-item label="有效时间" prop="validTime">
          <el-input v-model="editConfRouteForm.validTime"></el-input>
        </el-form-item>
        <el-form-item label="是否激活" prop="isActivate">
          <el-input v-model="editConfRouteForm.isActivate"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editPermission">确 定</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "DogmovieActor",

  // components: { ComponentName },

  // directives: { DirectiveName },

  data() {
    return {
      routeCode: "",
      pageNum: 1,
      pageSize: 5,
      confRouteList: [],
      total: 0,
      addDialogVisible: false, //模态框初始状态设置为关闭
      editDialogVisible: false,
      fileImg: "",

      addConfRouteForm: {
        routeCode: "",
        interfaceCodes:"",
        resKvRouteCode:"",
        validTime:"",
        isActivate:""



      },
      editConfRouteForm: {
        id: 0,
        routeCode: "",
        interfaceCodes:"",
        resKvRouteCode:"",
        validTime:"",
        isActivate:""
      },
      addConfRouteFormRules: {
        routeCode: [
          { required: true, message: "请输入演员名称", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "演员名称在2-20個字符之間",
            trigger: "blur",
          },
        ],
      },
      editActorFormRules: {
        routeCode: [
          { required: true, message: "请输入演员名称", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "演员名称在2-20個字符之間",
            trigger: "blur",
          },
        ],
      },
    }
  },

  mounted() {},

  methods: {
    //删除
    async removeActorById(id) {
      //如果要使用弹出提示框 需要在方法上添加、async(异步)关键字后 才可以使用(await)等待关键字
      const res = await this.$confirm("此操作将永久删除该权限, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err)

      //选择确定是  返回值为:confirm
      if ("confirm" === res) {
        this.$api.actor
          .deleteActor(id)
          .then((res) => {
            this.$message.success("删除成功")
            this.searConfRoute()
          })
          .catch((err) => {
            this.$message.error("服务端异常，请联系管理员")
          })
      } else {
        this.$message.info("取消删除")
      }
    },

    //添加
    addConfRoute() {   
        this.$api.confRoute.addconfRoute(this.addConfRouteForm).then((res) => {
          this.addDialogVisible = false
          if (res.data.code == 200) {
            this.$message.success("添加成功")
            this.searConfRoute()
          } else {
            this.$message.error("服务端异常，请联系管理员")
          }
      })
    },

    //修改
    editPermission() {
        this.$api.confRoute.updateconfRoute(this.editConfRouteForm).then((res) => {
          this.editDialogVisible = false
          if (res.data.code == 200) {
            this.$message.success("修改成功")
            this.searConfRoute()
          } else {
            this.$message.error("服务端异常，请联系管理员")
          }
      })
    },
    showEditDialog(row) {
      /*点击修改事件之后将模态框状态调整为true */
      this.editDialogVisible = true
      this.editConfRouteForm.id = row.id
      this.editConfRouteForm.routeCode = row.routeCode
      this.editConfRouteForm.interfaceCodes = row.interfaceCodes
      this.editConfRouteForm.resKvRouteCode = row.resKvRouteCode
      this.editConfRouteForm.validTime = row.validTime
      this.editConfRouteForm.isActivate = row.isActivate
    },
    //监听模态框 使用close方法  发生关闭时清空所有输入字符
    editDepartFormClose() {
      this.$refs.editActorFormRef.resetFields()
    },
    //关闭模态框时 清空所有输入框内信息
    addActorFormClose() {
      this.$refs.addConfRouteFormRef.resetFields()
    },

    getconfRouteList() {
      this.$api.confRoute
        .confRouteList({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          routeCode: this.routeCode,
        })
        .then((res) => {
          this.pageNum = res.data.pageNum
          this.pageSize = res.data.pageSize
          this.total = res.data.total
          this.confRouteList = res.data.list
        })
    },
    searConfRoute() {
      this.pageNum = 1
      this.pageSize = 10
      this.getconfRouteList()
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.getconfRouteList()
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage
      this.getconfRouteList()
    },
    reloadData() {
      //查询 列表
      this.searConfRoute()
    },
  },
  created() {
    this.reloadData()
  },
}
</script>

<style lang="scss" scoped></style>
